<template>
  <div>
<div class="shoplist">
    <div class="shophead">
     <router-link to="/shop"> <h1 class="h1">&lt;</h1></router-link>
      <h1>购物车</h1>
     
    </div>
    <div class="shoplist-cont" v-for="(v,i) in  this.$store.state.shoplist.arr1" :key="i">
        <div class="cont-title">
            <div class="cont-title-l">
                <span>满减优惠</span>
                <i>满25减10</i>
            </div>
            <div class="cont-title-r">
                <span>凑单 ></span>
            </div>
         </div>
         <div class="cont-content">
             <div class="cont-content-l">
                 
             
              <van-checkbox v-model="v.bool" @click="addprice(),check()"></van-checkbox>
             </div>
             <div class="cont-content-r">
                 <div class="content-img">
                     <img :src="v.img" alt="">
                 </div>
                 <div class="content-news">
                     <span>{{v.shoptitle}}</span>
                     <span>{{v.shoptype}}</span>
                     <span>{{v.shopnews}}</span>
                     <span>满25减10</span>
                     <span>
                         <div class="price-l"><i>￥{{v.shoprice}}</i>
                     <del>￥{{v.oldprice}}</del>
                     <i>3.08折</i></div>
                     <div class="price-r">
                         <span @click="del(i)" class="del">-</span>
                         <input type="text" readonly v-model="v.num">
                         
                         <span class="add" @click="add(i)">+</span>
                     </div>
                     </span>
                 </div>
             </div>
         </div>
    </div>
    <div class="nullbar"></div>
    <div class="botbar">
        <div class="botbar-l">
            <van-checkbox v-model="quanxuan" @click="prices()"><span class="quanxuan">全选</span></van-checkbox>
        </div>
        <div class="botbar-r">
            <span class="priceadd">合计￥</span><span class="price">{{price}}</span>
            <button>结算({{price}})</button>
        </div>

    </div>


</div>
  </div>
</template>

<script>


export default {
    data(){
        return {
           arr:[],
           quanxuan:false,
           price:10
        }},
mounted(){
    // 因为异步请求在vuex的actions中所以我需要调用actions
     let usp = new URLSearchParams()
                // usp.append("你发送的key","你发送的val")
                
            usp.append("type",this.$route.query.type )
    this.$store.dispatch("shoplist",{url:"/shoplist",usp})
    this.addprice();
  
  },methods:{
      del(i){
        
         if (this.$store.state.shoplist.arr1[i].num > 1){
                 this.$store.state.shoplist.arr1[i].num=this.$store.state.shoplist.arr1[i].num-1;
         }
       this.addprice();
       
      },
      add(i){
         this.$store.state.shoplist.arr1[i].num=this.$store.state.shoplist.arr1[i].num+1;
          this.addprice();
      },
      check(){
           let x=true;
          for(let i =0;i<this.$store.state.shoplist.arr1.length;i++){
             
              if(!this.$store.state.shoplist.arr1[i].bool){
                  this.quanxuan=false;
                  x=false;
                  break;
              }
          }
          if(x){
               this.quanxuan=true;
          }
      },
      addprice(){
          this.price=0;
           for(let i =0;i<this.$store.state.shoplist.arr1.length;i++){
         if(this.$store.state.shoplist.arr1[i].bool){
          this.price += this.$store.state.shoplist.arr1[i].num*this.$store.state.shoplist.arr1[i].shoprice
          }
      }
      },
      prices(){
          if(this.quanxuan){
              for(let i =0;i<this.$store.state.shoplist.arr1.length;i++){
                  this.$store.state.shoplist.arr1[i].bool=true;
              }
              this.addprice();
          }else{
               for(let i =0;i<this.$store.state.shoplist.arr1.length;i++){
                  this.$store.state.shoplist.arr1[i].bool=false;
              }
              this.price =0;
          }
      }
  },
  beforeupdate(){
      
  }
 


 
}

</script>

<style scoped>


.shoplist{
    background-color: #F2F2F2;
   
    width: 100%;
  }
.shophead{
    width: 3.75rem;
    height: 0.5rem;
    box-sizing: border-box;
    padding: 0 0.125rem ;
    display: flex;
    align-items: center;
    margin: auto;
    background-color:  #F2F2F2;
  }
  .h1{
   
    font-size: 0.3rem;
    color: black;
  }
  .shophead>h1{
     margin-left: 40%;
  }
  /* 内容 */
  .shoplist-cont{
      width: 3.5rem;
      height: 1.7rem;
      background-color: white;
      border-radius: 0.2rem;
      margin: auto;
      margin-bottom: 0.2rem;
  }
  .cont-title{
      width: 3rem;
      margin-left: 0.3rem;
      
      height:0.3rem;
      
      display: flex;
      line-height: 0.3rem;
      justify-content: space-between;
  }
  .cont-title-l{
      display: flex;
      height: 0.3rem;
      align-items: center;
  }
  .cont-title-l>span{
      display: block;
      width: 0.5rem;
      height: 0.2rem;
      line-height: 0.2rem;text-align: center;
      margin-right: 0.1rem;
      border-radius: 10%;
      box-sizing: border-box;
      border:1px solid #F0B4A3;
      color: #F0B4A3;
      font-size: 0.05rem;
  }
  .cont-title-r>span{
      color:#E67C59;
     
  }
  .cont-content{
      width: 100%;
      height: 1.4rem;
      display: flex;
  }
  .cont-content-l{
      width: 0.3rem;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .cont-content-r{
      display: flex;
  }
  .content-img{
      width: 0.9rem;
      height: 0.9rem;

  }
  .content-img>img{
      width: 100%;
      height: 100%;
  }
  .content-news{
   flex: 1;
   height: 100%;
   box-sizing: border-box;
   padding: 0 0.1rem;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
  }
  .content-news>span:nth-of-type(1){
      font-size: 0.2rem;
      font-weight: 600;
  }
  .content-news>span:nth-of-type(4){
       display: block;
      width: 0.5rem;
      height: 0.2rem;
      line-height: 0.2rem;text-align: center;
      margin-right: 0.1rem;
      border-radius: 10%;
      box-sizing: border-box;
      border:1px solid #F0B4A3;
      color: #F0B4A3;
      font-size: 0.05rem;
  }
   .content-news>span:nth-of-type(5){
       display: flex;
       width: 100%;
       justify-content: space-between;
       align-items: center;
   }
   .price-l{
       width: 50%;
       display: flex;
       justify-content: space-between;
   }
   .price-l>i:nth-of-type(1){
       font-size: 0.12rem;
       font-weight: 600;
       color: #F0B4A3;
       
   }
   .price-r{
       display: flex;
       width: 48%;
       justify-content: flex-end;
        cursor: pointer;
   }
   .price-r>span:nth-of-type(1){
       display: block;
       box-sizing: border-box;
       width: 0.2rem;
       height: 0.2rem;
       text-align: center;
       border: 1px solid #F0F0F0;
        font-size: 0.2rem;
        line-height: 0.15rem;
        border-top-left-radius: 0.1rem ;
        border-bottom-left-radius: 0.1rem;
   }
    .price-r>input{
        width: 0.2rem;
        height: 0.2rem;
        display: block;
        border: 1px solid #F0F0F0;
        padding: 0 0.05rem;
        box-sizing: border-box;
    }
    .price-r>span:nth-of-type(2){
       display: block;
       box-sizing: border-box;
       width: 0.2rem;
       height: 0.2rem;
       text-align: center;
       border: 1px solid #F0F0F0;
        font-size: 0.2rem;
        line-height: 0.15rem;
         border-top-right-radius: 0.1rem ;
        border-bottom-right-radius: 0.1rem;
   }
   /* 底部结算 */
   .botbar{
       width: 3.75rem;
       height: 0.6rem;
       margin: auto;
       display: flex;
       box-sizing: border-box;
       padding: 0 0.2rem;
       justify-content: space-between;
       position: fixed;
       bottom: 0;
       background-color:#F2F2F2 ;
       align-items: center;
   }
   .quanxuan{
       font-size: 0.15rem;
       font-weight: 600;
   }
   .botbar-r{
       line-height: 0.4rem;
   }
   .botbar-r>button{
       display: inline-block;
      box-sizing: border-box;
      padding: 0 0.1rem;
       height: 0.5rem;
       line-height: 0.2rem;
       margin-left: 0.2rem;
       border-radius: 0.5rem;
       border: 0;
       background-color: #FE671B;
       font-size: 0.15rem;
       color: white;
       letter-spacing:5px;

   }
   .priceadd{
       font-size: 0.12rem;
       color: #C7C7C7;
   }
   .price{
       font-size: 0.18rem;
       color: #C7C7C7;
   }

   /* 占位 */
   .nullbar{
       width: 100%;
       height: 0.6rem;
   }
</style>